﻿<div ng-controller="RelativePositionController as esgRelative" class="row-fluid">
    <div class="col-md-3">
        <div class="sidebar-table-left no-border">
            <div class="gray-number-bubble" style="font-size: 26px;">
                {{ esgRelative.esgRelativePosition.positionSummary.comparativeGroupRank }}
                <div style="font-size: 18px; padding: 3px 0;">out of</div>
                {{ esgRelative.esgRelativePosition.positionSummary.comparativeGroupSize }}
            </div>
        </div>
        <div class="sidebar-table-right no-border" style="width: 126px;">
            <div class="title-black-border">Relative Position</div>
            <ul class="esg-ratings">
                <li class="active">{{ esgRelative.esgRelativePosition_positionSummary_esgPositionName }}</li>
            </ul>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="col-md-9">
        <div style="float: left; width: 48%; margin-right: 4%;">
            <div class="table-2" style="margin-top: 9px;">
                <div class="table-row-2">
                    <div class="table-cell-head-2 width_370">Top 5 Companies</div>
                    <div class="table-cell-head-2">Score</div>
                </div>
                <div class="table-row" ng-repeat="company in esgRelative.esgRelativePosition.topList">
                    <div class="table-cell-2 width_370" ng-class="{ 'green-bold': $parent.currentCompany.id == company.companyId }">{{ $index + 1 }}. {{ company.companyName }}</div>
                    <div class="table-cell-2" style="text-align: right;">{{ company.score | number: 0 }}</div>
                </div>
            </div>
        </div>
        <div style="float: left; width: 48%;">
            <div class="table-2" style="margin-top: 9px;">
                <div class="table-row-2">
                   
                        <div class="table-cell-head-2 width_370">Peers (Market cap ${{ esgRelative.esgRelativePosition.marketCapRangeFrom  | number: 0}}-${{ esgRelative.esgRelativePosition.marketCapRangeTo | number: 0 }}bn)</div>
                        <div class="table-cell-head-2">Score</div>
                    </div>
                <div class="table-row" ng-repeat="company in esgRelative.esgRelativePosition.peersList">
                   
                    <div class="table-cell-2 width_370" ng-class="{ 'green-bold': $parent.currentCompany.id == company.companyId }">{{ $index + 1 }}. {{ company.companyName }}</div>
                    <div class="table-cell-2" style="text-align: right;">{{ company.score | number: 0 }}</div>
                </div>
            </div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>